<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <!-- <el-button type="primary" @click="openDialog">新增</el-button> -->
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column label="商品">
                <template #default="{ row }">
                    <div v-for="item in row.goodsList">
                        <el-image style="width: 100px; height: 100px" :src="item.goodsImg" fit="cover" />
                        <div>{{ item.goodsName }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="orderPrice" label="下单价格" />
            <el-table-column prop="realPrice" label="实际价格" />
            <el-table-column prop="orderStatus" label="订单状态">
                <template #default="{ row }">
                    {{ formatOrderStr(row.orderStatus) }}
                </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="支付状态">
                <template #default="{ row }">
                    {{ formatPayStr(row.payStatus) }}
                </template>
            </el-table-column>
            <el-table-column prop="logisticsStatus" label="物流状态">
                <template #default="{ row }">
                    {{ formatLogisticsStr(row.logisticsStatus) }}
                </template>
            </el-table-column>

            <el-table-column label="商品">
                <template #default="{ row }">
                    <el-button v-if="row.logisticsStatus === 1" text type="primary"
                        @click="pickupGoods(row)">取货</el-button>
                    <el-button v-else-if="row.logisticsStatus === 2" text type="primary"
                        @click="deliveredGoods(row)">送达</el-button>
                    <div v-else>已发货</div>
                    <!-- <el-button v-if="row.goodsStatus === 3" text type="primary" @click="pickedUpGoods(row)">取货</el-button> -->
                </template>
            </el-table-column>
        </CustomTable>
    </div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import { deliveredOrder, deliveryOrder, getFarmOrderList, getLeaderOrderList, getOrderList, pickedUpOrder, pickUpOrder, stockOrder } from '@/apis/order'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import { DEFAULT_FORMATS_DATEPICKER, ElMessage } from 'element-plus'
const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const res = await getLeaderOrderList({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    tableData.value = res.list
    tableTotal.value = res.total
}

const pickupGoods = async (row) => {
    await pickedUpOrder(row.id)
    ElMessage.success('已取货')
}

const sendGoods = async (row) => {
    await deliveryOrder(row.id)
    ElMessage.success('开始配送')
}
const deliveredGoods = async (row) => {
    await deliveredOrder(row.id)
    ElMessage.success('已送达')
}
const formatGoodsStr = (val) => {
    // 商品状态1待备货2备货中3待取货4已取货
    switch (val) {
        case 1:
            return '待备货'
        case 2:
            return '备货中'
        case 3:
            return '待取货'
        case 4:
            return '已取货'
        default:
            break;
    }
}
const formatLogisticsStr = (val) => {
    // 物流状态1待取货2配送中3已送达
    switch (val) {
        case 1:
            return '待取货'
        case 2:
            return '配送中'
        case 3:
            return '已送达'
        default:
            break;
    }
}
const formatOrderStr = (val) => {
    // 订单状态1已下单2已取消3已退货	
    switch (val) {
        case 1:
            return '已下单'
        case 2:
            return '已取消'
        case 3:
            return '已退货'
        default:
            break;
    }
}

const formatPayStr = (val) => {
    // 付款状态1未付款2已付款	
    switch (val) {
        case 1:
            return '未付款'
        case 2:
            return '已付款'
        default:
            break;
    }
}
onMounted(() => {
    getList()
})
</script>

<style scoped></style>
